import { $ } from './library/jquery.js';
import cookie from './library/cookie.js';
import './library/jquery.lazyload.js';

$(function () {
    // 通用
    // 表单激活
    $('input').on({
        'focus': function () {
            $(this).parent().children().addClass('input-focus');
        },
        'blur': function () {
            $(this).parent().children().removeClass('input-focus');
        }
    });
    if (cookie.get('username')) {
        $('.header-mine').removeClass('hide');
        $('.header-login').addClass('hide');
        $('#username').html(cookie.get('username'));
    };
    $('#loginout').on('click', function () {
        cookie.remove('isLogined');
        cookie.remove('username');
        location.reload();
    });
    $("img.lazy").lazyload({
        placeholder: '../img/loading2.gif',
        effect: "fadeIn"
    });

    $('.header-search>input').on('focus', function () {
        $('.search-list').removeClass('hide');
    });

    $('.header-search>input').on('blur', function () {
        $('.search-list').addClass('hide');
    });

    // ajax请求数据
    $.ajax({
        type: "get",
        url: "../../interface/getData.php",
        dataType: "json",
        success: function (res) {
            // console.log(res);
            let tmp = '';
            res.forEach((elm, i) => {
                let pic = JSON.parse(elm.picture);
                tmp += `
            <div class="phone-product active-movetop">
                <a href="./product.html?id=${elm.id}" target="_blank">
                    <img class="lazy"
                        data-original=${pic[0].src}
                        alt="">
                    <div class="phone-title">
                        ${elm.title}
                    </div>
                    <div class="phone-info">
                        ${elm.special}
                    </div>
                    <div class="phone-price">
                        ${elm.price}元起
                    </div>
                </a>
            </div>`
            });
            $('.phone-right').append(tmp).find('.lazy').lazyload({
                placeholder: '../img/loading2.gif',
                effect: "fadeIn"
            });
            $('.active-movetop').hover(function () {
                $(this).css('box-shadow', '0 15px 30px rgb(0 0 0 / 10%)');
                $(this).stop(true, true);
                $(this).animate({
                    top: -3
                }, 400)
            }, function () {
                $(this).css('box-shadow', '');
                $(this).stop(true, true);
                $(this).animate({
                    top: 0
                }, 400)
            });
        }
    });

    // ------------------------------------------------
    // 头部

    // navslidedown效果
    let headerNavTimer = null;
    $('.header-nav2>div').first().hover(function () {
        if (headerNavTimer) {
            clearTimeout(headerNavTimer);
        }
        $('.header-list-container').slideDown(400);
    }, function () {
        headerNavTimer = setTimeout(() => {
            $('.header-list-container').slideUp(400);
        }, 300);
    });
    $('.header-list-container').hover(function () {
        if (headerNavTimer) {
            clearTimeout(headerNavTimer);
        }
    }, function () {
        headerNavTimer = setTimeout(() => {
            $('.header-list-container').slideUp(400);
        }, 300);
    });

    // 切换标签页
    $('.header-nav2>div').first().on('mousemove', function (ev) {
        let tmp = $(ev.target).attr('data-index');
        $(`.header-list[data-index=${tmp}]`).removeClass('hide');
        $(`.header-list[data-index!=${tmp}]`).addClass('hide');
    });

    // placeholder切换
    let placeholderList = ['【以旧换新】至高补贴3000元', '电视', '家电', '手机', '个护', '智能', '小米11', '空调', '洗衣机', '红米'];
    let placeholderListIndex = 1;
    setInterval(() => {
        $('.header-search>input').attr('placeholder', placeholderList[placeholderListIndex]);
        placeholderListIndex++;
        if (placeholderListIndex == placeholderList.length - 1) placeholderListIndex = 0;
    }, 4000);


    //用户名下拉菜单

    let cartUsernameTimer = null;
    $('#username-box').hover(() => {
        if (cartUsernameTimer) clearTimeout(cartUsernameTimer);
        $('.username-list').stop(true, true);
        $('#username-box').css({
            backgroundColor: '#fff',
            color: '#ff6700'
        });
        $('.username-list').slideDown(200);
    }, () => {
        cartUsernameTimer = setTimeout(() => {
            $('.username-list').slideUp(200);
            $('#username-box').css({
                backgroundColor: '',
                color: ''
            });
        }, 200);
    });
    $('.username-list').hover(() => {
        if (cartUsernameTimer) clearTimeout(cartUsernameTimer);
    }, () => {
        cartUsernameTimer = setTimeout(() => {
            $('.username-list').slideUp(200);
            $('#username-box').css({
                backgroundColor: '',
                color: ''
            });
        }, 200);
    });

    // 购物车下拉菜单
    let cartBoxTimer = null;
    $('.header-cart').hover(() => {
        if (cartBoxTimer) clearTimeout(cartBoxTimer);
        $('.header-cart-box').stop(true, true);
        $('.header-cart-box').slideDown(200);
        $('.header-cart').css({
            backgroundColor: '#fff',
            color: '#ff6700'
        });
    }, () => {
        cartBoxTimer = setTimeout(() => {
            $('.header-cart-box').slideUp(200);
            $('.header-cart').css({
                backgroundColor: '',
                color: ''
            });
        }, 200);
    });


    // 购物车数据请求
    $('.header-cart').one('mouseenter', function () {
        let shop = cookie.get('shop');
        if (shop && shop != "[]") {
            $('.header-cart-empty').addClass('hide');
            $('.hcp-total').removeClass('hide');
            shop = JSON.parse(shop);
            let idList = shop.map(el => el.id).join();
            $.ajax({
                type: "get",
                url: "../../interface/getItems.php",
                data: {
                    idList: idList
                },
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    let tmp = '';
                    let price = 0;
                    res.forEach(elm => {
                        let pic = JSON.parse(elm.picture);
                        tmp += `
                            <div class="hcp-box">
                                <img src="${pic[0].src}"
                                    alt="">
                                <a href="./product.html?id=${elm.id}">${elm.title}</a>
                                <div>
                                <span class="hcp-price">${elm.price}</span>元
                                ×
                                <span class="hcp-num">1</span>
                                </div>
                            </div>`;
                        price += +elm.price;
                    });
                    $('.hcp-total').before(tmp);
                    $('.hcp-total-num>span').html($('.hcp-box').length);
                    $('.hcp-total-price>span').first().html(price);
                }
            });
        }
    });

    $('.header-cart-box').hover(() => {
        if (cartBoxTimer) clearTimeout(cartBoxTimer);
    }, () => {
        cartBoxTimer = setTimeout(() => {
            $('.header-cart-box').slideUp(200);
            $('.header-cart').css({
                backgroundColor: '',
                color: ''
            });
        }, 200);
    });

    // ------------------------------------------------
    // 底部

    // logo变换
    setInterval(() => {
        $('.ff-active>img').toggleClass('hide');
    }, 1500);

    // 侧边栏
    $(window).on('scroll', function () {
        if ($('html').scrollTop() > innerHeight) {
            $('aside>a').last().removeClass('hide');
            $('aside').css('bottom', 70);
        } else {
            $('aside>a').last().addClass('hide');
            $('aside').css('bottom', 174);
        };
    });

    //回到顶部
    $('aside>a').last().on('click', function () {
        $('html').scrollTop() = 0;
    });


    // bannerlist效果
    let bannerListTimer = null;
    $('.banner-list>li').on('mousemove', function (ev) {
        if (bannerListTimer) clearTimeout(bannerListTimer);
        let tmp = $(ev.target).attr('data-index');
        switch (tmp) {
            case '3':
            case '5':
            case '6':
            case '8':
            case '9':
            case '10':
                $(`.banner-list>ul[data-index=${tmp}]`).css('width', 745);
                break;
            case '7':
                $(`.banner-list>ul[data-index=${tmp}]`).css('width', 497);
                break;
        };
        $(`.banner-list>ul[data-index=${tmp}]`).removeClass('hide');
        $(`.banner-list>ul[data-index!=${tmp}]`).addClass('hide');
    });
    $('.banner-list>li').on('mouseout', function () {
        bannerListTimer = setTimeout(() => {
            $('.banner-list>ul').addClass('hide');
        }, 100)
    });
    $('.banner-list>ul').on('mousemove', function () {
        if (bannerListTimer) clearTimeout(bannerListTimer);
    });
    $('.banner-list>ul').on('mouseout', function () {
        bannerListTimer = setTimeout(() => {
            $('.banner-list>ul').addClass('hide');
        }, 100)
    });


    // 切换标签页
    $('.homeelectric-select>span').on('mousemove', function () {
        let tmp = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $(`.homeelectric-right[data-index=${tmp}]`).removeClass('hide').siblings('.homeelectric-right').addClass('hide');
    });

    $('.intellect-select>span').on('mousemove', function () {
        let tmp = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $(`.intellect-right[data-index=${tmp}]`).removeClass('hide').siblings('.intellect-right').addClass('hide');
    });

    $('.match-select>span').on('mousemove', function () {
        let tmp = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $(`.match-right[data-index=${tmp}]`).removeClass('hide').siblings('.match-right').addClass('hide');
    });

    // 倒计时
    setInterval(() => {
        let currentTime = new Date();
        let targetTime = new Date();
        targetTime.setHours(24);
        targetTime.setMinutes(0);
        targetTime.setSeconds(0);
        let gap = targetTime - currentTime;
        let hour = Math.floor(gap / 1000 / 60 / 60) < 10 ? '0' + Math.floor(gap / 1000 / 60 / 60) : Math.floor(gap / 1000 / 60 / 60);
        let minute = Math.floor(gap / 1000 / 60 - hour * 60) < 10 ? '0' + Math.floor(gap / 1000 / 60 - hour * 60) : Math.floor(gap / 1000 / 60 - hour * 60);
        let second = Math.floor(gap / 1000 - hour * 60 * 60 - minute * 60) < 10 ? '0' + Math.floor(gap / 1000 - hour * 60 * 60 - minute * 60) : Math.floor(gap / 1000 - hour * 60 * 60 - minute * 60);
        $('.timebox>span').first().html(hour);
        $('.timebox>span').eq(1).html(minute);
        $('.timebox>span').last().html(second);
    }, 1000);

    // 小米秒杀slider
    let sliderBoxLeft = 0;
    let sliderBoxIndex = 0;
    $('.slider-box').css('width', $('.miaosha-right-box').length * 234 + ($('.miaosha-right-box').length - 1) * 14);
    function sliderBox(sliderDirection = 1) {
        // let sliderGap = Math.round($('.slider-box').width() - Math.abs($('.slider-box').position().left));
        // if (sliderGap <= 978) sliderBoxLeft = 0;
        if (sliderDirection) {
            sliderBoxLeft -= 992;
            sliderBoxIndex++;
        } else {
            sliderBoxLeft += 992;
            sliderBoxIndex--;
        }
        if (sliderBoxIndex == 3) {
            $('.slider-box').animate({
                'left': 0
            }, 1000);
            sliderBoxLeft = 0;
            sliderBoxIndex = 0;
        } else {
            $('.slider-box').animate({
                'left': sliderBoxLeft
            }, 500);
        }
        $('.controlbox>span').off();
        if (sliderBoxIndex == 2) {
            $('.controlbox>span').last().removeClass('active-direction').off('click');
        } else {
            $('.controlbox>span').last().addClass('active-direction').on('click', activeDirection);
        }
        if (sliderBoxIndex == 0) {
            $('.controlbox>span').first().removeClass('active-direction').off('click');
        } else {
            $('.controlbox>span').first().addClass('active-direction').on('click', activeDirection);
        }
    }
    let sliderBoxTimer = setInterval(() => {
        sliderBox();
    }, 3000);
    $('.miaosha-right').hover(() => {
        clearInterval(sliderBoxTimer);
    }, () => {
        sliderBoxTimer = setInterval(() => {
            sliderBox();
        }, 3000);
    });
    function activeDirection() {

        if ($(this).index() == 0) {
            sliderBox(0);
        } else {
            sliderBox();
        }
    }
    $('.controlbox>span').on('click', activeDirection);

    // bannerslider

    let bannerSliderIndex = 0;
    function bannerSlider(direction = 1) {
        $('.banner-slider>div>img').eq(bannerSliderIndex).css('opacity', 0);
        if (!direction) {
            bannerSliderIndex--;
        } else {
            bannerSliderIndex++;
        }
        if (bannerSliderIndex == 5) bannerSliderIndex = 0;
        if (bannerSliderIndex == -1) bannerSliderIndex = 4;
        $('.banner-slider>ul>li').eq(bannerSliderIndex).addClass('active-bannerslider').siblings().removeClass('active-bannerslider');
        $('.banner-slider>div>img').eq(bannerSliderIndex).css('opacity', 1);
    };
    let bannerSliderTimer = setInterval(() => {
        bannerSlider();
    }, 3500);
    $('.banner-slider').hover(() => {
        clearInterval(bannerSliderTimer);
    }, () => {
        bannerSliderTimer = setInterval(() => {
            bannerSlider();
        }, 2000);
    });
    $('.banner-slider>span').on('click', function () {
        if ($(this).index() == 3) {
            bannerSlider();
        } else {
            bannerSlider(0);
        }
    });
    $('.banner-slider>ul>li').on('click', function () {
        let tmp = $(this).index();
        $('.banner-slider>ul>li').eq(tmp).addClass('active-bannerslider').siblings().removeClass('active-bannerslider');
        $('.banner-slider>div>img').eq(bannerSliderIndex).css('opacity', 0);
        $('.banner-slider>div>img').eq(tmp).css('opacity', 1);
        bannerSliderIndex = tmp;
    });

    //------------------------------------------------
    // 购物车页


    //------------------------------------------------
    // 登录页




    //------------------------------------------------
    // 注册页
})